import { showAlert } from "../functionFromexport.js";

const WebApp = window.Telegram.WebApp;
WebApp.BackButton.hide();

const showPopUpPromoButton = document.querySelector(".fieldPromo");
const popUpPromo = document.getElementById("referrerPromo");

const closePromoButton = document.getElementById("closePromoButton");

showPopUpPromoButton.addEventListener("click", () => {
  console.log("Pop");
  popUpPromo.style.display = "flex";
});

popUpPromo.addEventListener("click", (e) => {
  if (e.target.id === "referrerPromo") {
    popUpPromo.style.display = "none";
  }
});

closePromoButton.addEventListener("click", () => {
  popUpPromo.style.display = "none";
});

const innerPromoBanners = document.querySelector(".innerPromo");

fetch("/banners")
  .then((res) => res.json())
  .then((data) => {
    // console.log("data", data);
    displayBanners(data);
  });

const displayBanners = (data) => {
  data.forEach(({ name, src, about }, index) => {
    // console.log(name, src);

    innerPromoBanners.innerHTML += `
    <div class="slide" style="background-image: url('${src}');">
    <h2 class="h3Ower">${name}</h2>
    <p class="tooltip">${about}</p>
  </div>`;
  });
};

const openPromoMore = document.getElementById("pickPromo");
const firstFieldMain = document.getElementById("firstMain");
const secondFieldMain = document.getElementById("secondMain");

openPromoMore.addEventListener("click", () => {
  WebApp.BackButton.show();
  firstFieldMain.classList.add("classHide");
  secondFieldMain.classList.remove("classHide");
});

WebApp.BackButton.onClick(() => {
  firstFieldMain.classList.remove("classHide");
  secondFieldMain.classList.add("classHide");
  WebApp.BackButton.hide();
});

const openRefProgram = document.getElementById("pickRefProgram");
const thirdFieldMain = document.getElementById("thirdMain");

openRefProgram.addEventListener("click", () => {
  WebApp.BackButton.show();
  firstFieldMain.classList.add("classHide");
  thirdFieldMain.classList.remove("classHide");
});

WebApp.BackButton.onClick(() => {
  firstFieldMain.classList.remove("classHide");
  thirdFieldMain.classList.add("classHide");
  WebApp.BackButton.hide();
});

const fieldCopyPromo = document.querySelector(".fieldCopyPromo");
const copyPromo = document.getElementById("selfPromo");

fieldCopyPromo.addEventListener("click", function () {
  navigator.clipboard
    .writeText(copyPromo.innerText)
    .then(function () {
      showAlert("Скопированно");
    })
    .catch(function (error) {
      console.error("Error:", error);
    });
});

const shareButton = document.getElementById("share");

if (!navigator.share) {
  shareButton.classList.add("classHide");
  console.log("Ваш браузер не поддерживает эту функцию");
  fieldCopyPromo.style.marginBottom = "32px";
}

shareButton.addEventListener("click", () => {
  let textToCopy = copyPromo.innerText;
  if (navigator.share) {
    navigator
      .share({ text: `${textToCopy}` })
      .then(() => console.log("Successful share"))
      .catch((error) => console.log("Error sharing", error));
  }
});
